<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
<!--    react.js的核心文件, 支持react语法-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!--    react-dom.js 支持react有关的DOM操作-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--    jsx-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<!--在以下代码中不仅有js语言,还有jsx语法-->
<script type="text/babel">
/*
1.使用react创建元素(虚拟DOM),将其插入app中
语法格式:
React.createElement();
参数1:节点名
参数2:节点的属性
参数3:节点的内容
返回值:新建的DOM节点(虚拟DOM)
例如:我想添加一个
标签 h2
设置 id 为 title
标签显示的内容:hello react
* */
let app=document.getElementById("app");
let newH2=React.createElement("h2",{id:"title",className:"c1"},'hello react');
ReactDOM.render(newH2,app)
/*
练习:
创建ul标签
* */
let   newli=React.createElement('li',{className:"li1"},'这是第一个li标签');
let  newUl=React.createElement('ul',{className:'lu1'},newli);
ReactDOM.render(newUl,app)
//JSX
let element=<h2>我是标签 <a href="01-React介绍.html">oen</a></h2>
ReactDOM.render(element,app);
</script>
